{% extends "User_panel/base_user_panel.html" %}
{% block script %}
  <script type="text/javascript" src="/site_media/js/tab.js"></script>
{% endblock %}
{% block panel-content %}
      <div id="tabs" style="float: left; margin: 10px 0 20px 20px; width: auto;">
        <ul>
          <li><a href="#comments">My Comments</a></li>
          <li><a href="#replys">My Replys</a></li>
        </ul>
        <div id="comments">
          <div id="comments-content" style="float:left">
            <ul>
            {% for comment in comments %}
              <li>{{comment.content}}</li>
            {% endfor %}
            </ul>
          </div>
          <div id="comments-product" style="float:left">
            <ul>
            {% for product in products %}
              <li>{{product.name}}</li>
            {% endfor %}
            </ul>
          </div>
          <div id="comments-date" style="float:left">
            <ul>
            {% for comment in comments %}
              <li>Posted at {{comment.created}}</li>
            {% endfor %}
            </ul>
          </div>
        </div>
        <div id="replys">
          <div id="replys-content" style="float:left">
            <ul>
            {% for comment in replys_comments %}
              <li>{{comment.content}}</li>
            {% endfor %}
            </ul>
          </div>
          <div id="replys-product" style="float:left">
            <ul>
            {% for product in replys_products %}
              <li>{{product.name}}</li>
            {% endfor %}
            </ul>
          </div>
          <div id="replys-date" style="float:left">
            <ul>
            {% for reply in replys %}
              <li>Posted at {{reply.created}}</li>
            {% endfor %}
            </ul>
          </div>
        </div>
      </div>
{% endblock %}